<!-- 消息中心模块 -->
<template>
    <div class="space-right">
        <div class="space-right-bottom ps tmsgBox" ref="tmsgBox">
        <div ref="respondBox1" v-show="showRespondBox">
            <my-comment
            v-model="textarea"
            :maxlength="300" 
            :sendComment="sendMyComment"
            @choseMyEmoji="handleChilChoseEmoji"
            @clear="clearChil"
            isRespond
            :removeRespond="removeRespond"></my-comment>
        </div>
        <el-col :xs="24" :md="24" class="tf-item" style="transition:all .5s ease-out;">
            <div v-if="item==='comment'" class="r-tFriendsBox">
                <ul v-if="total !== 0">
                    <li class="sysmsg-item" v-for="(item) in list" :key="item.id">
                        <article>
                            <header>
                                <img :src="item.avatarUrl?item.avatarUrl:$store.state.errorImg" @error="item.avatar=$store.state.errorImg">
                                <div class="i-name">
                                    <span>{{item.content.username}}</span>
                                </div>
                                <div class="m-class">
                                    {{item.content.isRootComment?'发表了评论':'回复了我的评论'}}
                                </div>
                            </header>
                            <section>
                                <a :href="'#/DetailArticle?aid='+item.content.goToArticle" target="_blank">
                                    <p v-html="analyzeEmoji(item.content.filterContent)" />
                                </a>
                                <div class="tmsg-replay-div">
                                    <time class="i-time">{{item.createTime}}</time>
                                    <span  v-show="item.content.isRootComment" class="tmsg-replay-span" @click="respondMsg(item.content)">
                                        回复
                                    </span>
                                    <!-- <span class="tmsg-replay-span" @click="deleteCommentMsg(item.id)">
                                        删除通知
                                    </span> -->
                                </div>
                            </section>
                        </article>
                    </li>
                </ul>
                <el-empty v-else style="height: 85vh" description="暂无消息"></el-empty>
            </div>
            <div v-if="item==='like'" class="r-tFriendsBox">
                <ul v-if="total !== 0">
                    <li class="sysmsg-item" v-for="(item) in list" :key="item.id">
                        
                    </li>
                </ul>
                <el-empty v-else style="height: 85vh" description="暂无消息"></el-empty>
            </div>
            <div v-if="item==='follow'" class="r-tFriendsBox">
                <ul v-if="total !== 0">
                    <li class="sysmsg-item" v-for="(item) in list" :key="item.id">
                        
                    </li>
                </ul>
                <el-empty v-else style="height: 85vh" description="暂无消息"></el-empty>
            </div>

            <pagination
            v-if="total > 0"
            :pageSizes="[4, 7, 10, 20, 30, 50]"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
        </el-col>
        </div>
    </div>
</template>


<script>
import { getSysCommentMsgList } from '../api/message.js'
import commentCom from './sendComment.vue'
import {sendComment} from '../api/comment.js'
export default {
    name: 'msgList',
    props: {
        /* item */
        item: {
            type: String,
            default: 'comment'
        }
    },
    data() { //选项 / 数据
        return {
            list: [],
            OwOlist: this.$store.state.OwOlist,
            // 总条数
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 4,
                conversationType: 'comment',
                content: undefined,
                startTime: undefined,
                endTime: undefined
            },
            textarea: '',
            showRespondBox: false,
            isRespond: false,
            aid: undefined,
            type: 0,
            rootId: -1,
            toCommentId: -1,
            toCommentUserId: undefined,
            showRespondBox: false,
        }
    },
    methods: { //事件处理器
        routeChange() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        handleChilChoseEmoji(emoji) {   // 拼接表情包
            this.textarea += emoji;
        },
        clearChil() {
            this.textarea = '';
        },
        deleteCommentMsg(msgId) {
            console.log('msgId:',msgId);
        },
        analyzeEmoji(cont) {
            var pattern1 = /\[[a-z0-9\u4e00-\u9fa5]+\]/g;
            var pattern2 = /\[[a-z0-9\u4e00-\u9fa5]+\]/;
            var urlRegex= /(https|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|](&nbsp;|<br\/>){1}/g;
            var content = cont.match(pattern1);
            var str = cont;
            str = this.preText(str);
            if(content){
                for(var i=0;i<content.length;i++){
                    for(var j=0;j<this.OwOlist.length;j++){
                        if("["+this.OwOlist[j].title +"]" == content[i]){
                            var src = this.OwOlist[j].url;
                            break;
                        }
                    }
                    str = str.replace(pattern2,'<img src="static/img/emot/image/'+src+'"/>');
                }
            }
            var url = str.match(urlRegex)
            if(url) {
                for(let i=0; i<url.length; i++) {
                    let endUrl = url[i].replace(/(&nbsp;|<br\/>){1}/, "")
                    str = str.replace(endUrl,'<img style="margin: 0" src=""><a target="_blank" href=' + endUrl + '>' + endUrl + '</a>' + '&nbsp;');
                }
            }
            return str;
        },
        preText(pretext) {
            return pretext.replace(/\r\n/g, '<br/>')
                        .replace(/\n/g, '<br/>')
                        .replace(/\s/g, '&nbsp;');
        },
        getList(){
            // console.log('item:',this.item)
            if(this.item === 'comment') {
                getSysCommentMsgList(this.queryParams).then(res => {
                    this.total = res.total;
                    this.list = [];
                    res.rows.forEach((item,index,arr) => {
                        item.content = JSON.parse(item.content);
                        this.list.splice(index,0,item);
                    });
                })
                return;
            }else if(this.item === 'like') {
                this.list = [];
                this.total = 0;
            }else if(this.item === 'follow') {
                this.list = [];
                this.total = 0;
            }
        },
        respondMsg(content){  // 点击回复
            let dom = event.currentTarget;
            // console.log('dom',dom);
            dom = dom.parentNode;
            this.isRespond = true;
            this.aid = content.goToArticle;
            this.rootId = content.entityId;
            this.toCommentId = content.entityId;
            this.toCommentUserId = content.userId;
            dom.appendChild(this.$refs.respondBox1);
            this.showRespondBox = true;
        },
        sendMyComment() { // 发送评论
            let info = JSON.parse(localStorage.getItem('userInfo'));
            const textarea = this.textarea + "&nbsp;";
            sendComment(this.type,this.aid,this.rootId,this.toCommentId,this.toCommentUserId,textarea,info.username,info.avatarUrl).then((response)=>{
                this.$message({
                    type:'success',
                    message:'评论成功'
                })
                this.textarea = '';
                this.rootId = -1;
                this.toCommentId = -1;
                this.toCommentUserId=-1;

                // this.routeChange();
                this.removeRespond();
                let timer = setTimeout(function(){
                    this.sendTip = '发送~';
                    clearTimeout(timer);
                },1000)
            })
        },
        removeRespond(){ // 取消回复
            this.isRespond = false;
            this.showRespondBox = false;
            this.rootId = -1;
            this.toCommentId = -1;
            this.toCommentUserId=-1;
        },
    },
    components: { //定义组件
        'my-comment': commentCom
    },
    watch: {
        '$route':'routeChange'
    },
    created() { //生命周期函数
        this.getList();
    }
}
</script>

<style>
.space-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: rgba(255,255,255,0.5);
}
.space-right .space-right-bottom {
    padding: 10px;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    /* flex: 1; */
    /* height: 95vh; */
    overflow: hidden;
}
.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}
.r-tFriendsBox{
    background: #fff;
    padding: 14px 16px 0 16px;
    border-radius: 5px;
    margin-bottom: 5px;
    /* margin-top: 38px; */
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
.r-tFriendsBox h1{
    padding:15px 0;
    font-size: 25px;
    font-weight: bold;
}
.r-tFriendsBox .tf-item{
    transition: all 0.3s ease-out;
    border-radius: 5px;
    position: relative;
}
.r-tFriendsBox .tf-item a{
    display: block;
    padding:0;
    height:90px;
}
.r-tFriendsBox .tf-item a img{
    width:60px;
    height:60px;
    border-radius: 50%;
    position: absolute;
    top:15px;
    left:15px;
    cursor: pointer;
    object-fit: cover;
}
.r-tFriendsBox .tf-item a h4{
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 20px;
    padding-top:15px;
    font-weight: bold;
}
.r-tFriendsBox .tf-item a p{
    margin:10px 0;
    font-size: 12px;
    line-height: 24px;
    color:#999;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.r-tFriendsBox .title {
    height: 62px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333;
    font-weight: bold;
}
.sysmsg-item {
    border-bottom: 1px solid rgba(239,239,239,.8);
    list-style: none;
}
.sysmsg-item .ul-item {
    padding: 15px 0 15px 0;
    text-align: center;
    cursor: pointer;
}
.sysmsg-item .ul-item a {
    font-size: 14px;
    font-weight: 700;
    color: #6B757B;
    cursor: pointer;
}
.sysmsg-item .ul-item a:hover {
    color: #2faee3;
}
.sysmsg-item article {
    padding: 20px;
}
.sysmsg-item article header {
    /* margin-bottom:10px; */
}
.sysmsg-item article header img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: left;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    margin-right: 15px;
    object-fit: cover;
    cursor: pointer;
}
.sysmsg-item article header .i-name {
    font-size: 16px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
}
.sysmsg-item article header .i-class {
    display: inline-block;
    margin-left: 5px;
    background-color: #c0e8af;
    color: #2a632b;
    padding: 1px 5px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
}
.sysmsg-item article header .m-class {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px;
}
.sysmsg-item article section .i-time {
    color:#aaa;
    font-size: 12px;
}
.sysmsg-item article section {
    margin-left: 50px;
    padding: 5px;
    transition: all 0.3s ease-in-out 0s;
}
.sysmsg-item article section:hover {
    background: #b1acac1f;
    border-radius: 7px;
    transition: all 0.3s ease-in-out 0s;
}
.sysmsg-item article section a:hover {
    color: #409EFF;
    transition: all 0.3s ease-in-out 0s;
}
.sysmsg-item article section a {
    transition: all 0.3s ease-in-out 0s;
}
.sysmsg-item article section p {
    line-height: 190%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sysmsg-item article section p img {
    vertical-align: middle;
    margin: 0 3px 0 3px;
    width: 18px;
    height: 18px;
}
.sysmsg-item article section p a {
    letter-spacing: 0;
    color: #47a8cf;
    /* color: #008ac5; */
    /* text-decoration: underline; */
}
.sysmsg-item article section p a:hover {
    letter-spacing: 0;
    color: #40c5f1;
    /* color: #0363fc; */
    text-decoration: underline;
}
.sysmsg-item article section .tmsg-replay-div {
    margin:10px 10px 10px 0;
    font-size: 12px;
    color:#64609E;
    cursor: pointer;
}
.sysmsg-item article section .tmsg-replay-span {
    margin:10px;
    font-size: 1em;
    color:#64609E;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.sysmsg-item article section .tmsg-replay-span:hover {
    margin:10px;
    font-size: 1.03em;
    font-weight: bold;
    color:#45436e;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
/* new */
.tmsgBox{
    position: relative;
    background: #fff;
    padding:15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.tmsg-respond h3{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.tmsg-respond h3 small{
    font-size: smaller;
    cursor: pointer;
}
.tmsg-respond textarea{
    background:#f4f6f7;
    margin-bottom: 10px;
}
.OwO{
    position: relative;
    z-index: 1;
}
.OwO .OwO-logo{
    position: relative;
    border-radius: 4px;
    color:#444;
    display: inline-block;
    background: #fff;
    border:1px solid #ddd;
    font-size: 13px;
    padding:0 6px;
    cursor: pointer;
    height:30px;
    box-sizing: border-box;
    z-index: 2;
    line-height: 30px;
}
.OwO .OwO-logo:hover{
    animation:a 5s infinite ease-in-out;
    -webkit-animation:a 5s infinite ease-in-out;
}
.OwO .OwO-body{
    position: absolute;
    background: #fff;
    border:1px solid #ddd;
    z-index: 1;
    top:29px;
    border-radius: 0 4px 4px 4px;
    display: none;
}
.OwO-open .OwO-body{
    display: block;
}
.OwO-open .OwO-logo{
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}
.OwO-open .OwO-logo:hover{
    animation:none;
    -webkit-animation:none;
}
.OwO .OwO-items {
    max-height: 197px;
    overflow: scroll;
    font-size: 0;
    padding:10px;
    z-index: 1
}
.OwO .OwO-items .OwO-item{
    background: #f7f7f7;
    padding:5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 0 10px 12px 0;
    transition: 0.3s;
    line-height: 19px;
    font-size: 20px;
    cursor: pointer;
}
.OwO .OwO-items .OwO-item:hover{
    background: #eee;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
                0 3px 1px -2px rgba(0,0,0,.2),
                0 1px 5px 0 rgba(0,0,0,.12);
    animation:a 5s infinite ease-in-out;
    -webkit-animation:a 5s infinite ease-in-out;
}
.OwO .OwO-body .OwO-bar{
    width:100%;
    height:30px;
    border-top: 1px solid #ddd;
    background: #fff;
    border-radius: 0 0 4px 4px;
    color: #444;
}
.OwO .OwO-body .OwO-bar .OwO-packages li{
    display: inline-block;
    line-height: 30px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
    margin-right: 3px;
    text-align: center;
}
.OwO .OwO-body .OwO-bar .OwO-packages li:first-of-type{
    border-radius: 0 0 0 3px;
}
@-webkit-keyframes a{
    2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
    18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
    30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
    44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
    60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
    86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
    92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
    94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
    96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}
}
@keyframes a{
    2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
    18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
    24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
    30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
    40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
    44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
    48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
    52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
    56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
    60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
    62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
    68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
    72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
    74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
    82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
    84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
    86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
    88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
    90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
    92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
    94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
    96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
    98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
    0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}
}
/*用户输入表单*/
.tmsg-r-info{
    margin:10px 0;
}
.tmsg-r-info input{
    height:30px;
    border-radius: 4px;
    background: #f4f6f7;
}
.tmsg-r-info .info-submit{
    margin: 10px 0;
    text-align: center;
}
.tmsg-r-info .info-submit p,.tmsg-commentshow h1{
    /*background: #97dffd;*/
    color:#fff;
    border-radius: 5px;
    cursor: pointer;
    /*transition: all .3s ease-in-out;*/
    height:30px;
    line-height: 30px;
    text-align: center;
}
/*评论列表*/
.tmsg-comments .tmsg-comments-tip{
    display: block;
    border-left: 4px solid #97dffd;
    padding: 0 10px;
    margin: 40px 0 30px 0;
    font-size: 20px;
}
.tmsg-commentlist {
    margin-bottom:20px;
}
.tmsg-commentlist-children {
    position: relative;
    margin-bottom:20px;
    margin-left: 50px;
    padding: 0 20px 5px 20px;
    list-style: none;
    background: #f8f8f8;
    border-radius: 6px;
}
.tmsg-commentlist-children:before{
    position: absolute;
    left: 15px;
    top: -17px;
    border: 9px solid transparent;
    border-bottom: 10px solid #f8f8f8;
    content: "";
}
.tmsg-commentshow>.tmsg-commentlist{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-commentshow>.tmsg-commentlist-children{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-c-item{
    border-top: 1px solid rgba(239,239,239,.8);
}
.tmsg-c-item article{
    margin:15px 0;
}
.tmsg-c-item article header{
    margin-bottom:10px;
}
.tmsg-c-item article header img{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: left;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    margin-right: 15px;
    object-fit: cover;
    cursor: pointer;
}
.el-popover img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    float: left;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    margin-right: 15px;
    object-fit: cover;
    cursor: pointer;
}
.tmsg-c-item article header .i-name{
    font-size: 14px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
}
.tmsg-c-item article header .i-class{
    display: inline-block;
    margin-left: 5px;
    background-color: #c0e8af;
    color: #2a632b;
    padding: 1px 5px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
}
.tmsg-c-item article header .m-class{
    display: inline-block;
    margin-left: 5px;
    background-color: #FBD54E;
    color: #B72025;
    padding: 1px 5px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
}
.tmsg-c-item article header .i-time{
    color:#aaa;
    font-size: 12px;
}
.tmsg-c-item article section{
    margin-left: 60px;
}
.tmsg-c-item article section p{
    line-height: 190%;
    word-wrap: break-word;
    overflow: hidden;
}
.tmsg-c-item article section p img{
    vertical-align: middle;
    margin: 0 3px 0 3px;
    width: 18px;
    height: 18px;
}
.tmsg-c-item article section p a{
    letter-spacing: 0;
    color: #47a8cf;
    /* color: #008ac5; */
    /* text-decoration: underline; */
}
.tmsg-c-item article section p a:hover{
    letter-spacing: 0;
    color: #40c5f1;
    /* color: #0363fc; */
    text-decoration: underline;
}
.tmsg-c-item article section .tmsg-replay-div{
    margin:10px 10px 10px 0;
    font-size: 12px;
    color:#64609E;
    cursor: pointer;
}
.tmsg-c-item article section .tmsg-replay-span{
    margin:10px 10px 10px 0;
    font-size: 12px;
    color:#64609E;
    cursor: pointer;
}
.tmsg-c-item article section .tmsg-replay-span:hover{
    margin:10px 10px 10px 0;
    font-size: 12px;
    font-weight: bold;
    color:#45436e;
    cursor: pointer;
}
.el-textarea__inner{
    white-space: nowrap;
}
</style>